<template>
	<view class="coin-detail">
		<view class="coin-order-list">
			<scroll-view scroll-y="true" @scrolltolower="reachBottom" :style="{ height: height + 'px'}">
				<template v-if="deviceAnnualFeeRecordList.length > 0">
					<view class="coin-order-item" v-for="(item, index) of deviceAnnualFeeRecordList" :key="index">
						<view class="order-details">
							<view class="order-time-box">
								<view class="text-30" v-if="item.gmtPayment">
									{{Date.parse(item.gmtPayment) | date('yyyy/mm/dd hh:MM:ss')}}
								</view>
								<view v-else></view>
								<view class="order-time-box text-38">
									<text class="price">{{item.totalAmount}}元</text>
								</view>
							</view>
							<view class="left-box">
								<view class="information-bar margin-top-30"
									:class="item.orderItemList && item.orderItemList.length > 0 ? 'information-bar-item' : ''">
									<view class="information-title">流量卡续费</view>
								</view>
							</view>

							<view
								style="margin-top: 20rpx;color: rgba(0, 0, 0, 0.6); font-size: 28rpx;padding: 0 20rpx;">
								<view v-for="(item1, index1) of item.deviceAnnualFeeRecordItemVoList" :key="index1"
									style="display:  flex;justify-content: space-between; margin: 10rpx 20rpx 10rpx 0;">
									<view>
										{{item1.deviceNo}}
									</view>
									<view style="display: flex;">
										<text class="price">{{item1.amount}}元</text>
										/{{item1.quantity}}
										<view v-if="item1.defaultMode == 1">
											年
										</view>
										<view v-if="item1.defaultMode == 2">
											个月
										</view>
									</view>
								</view>
							</view>


							<view class="information-bar">
								<view class="information-title">平台单号：</view>
								<view class="information-text">{{item.outTradeNo}}</view>
							</view>
							<view class="information-bar"
								v-if="item.payChannelOrderNo">
								<view class="information-title" v-if="item.payChannelOrderNo">交易单号：</view>
								<view class="information-text">{{item.payChannelOrderNo?item.payChannelOrderNo:''}}
								</view> 
							</view>
							<view class="order-time-box">
								<view class="information-bar">
									<view class="information-title">订单状态：</view>
									<view class="information-text">
										<text class="payment-wait"
											v-if="orderStatusEnum.WAIT == item.status">待支付</text>
										<text class="payment-successful"
											v-else-if="orderStatusEnum.SUCCESS == item.status">支付成功</text>
										<text class="payment-successful"
											v-else-if="orderStatusEnum.PART_REFUND == item.status">部分退款成功</text>
										<text class="payment-successful color-6072FF"
											v-else-if="orderStatusEnum.FULL_FERUND == item.status">退款成功</text>
										<text class="coin-failure coin-color-orange"
											v-else-if="orderStatusEnum.REFUNDING == item.status">退款中</text>
										<text class="payment-successful"
											v-else-if="orderStatusEnum.REFUND_FAIL == item.status">退款失败</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<u-loadmore :status="loadStatus" height="70rpx" line=true>
					</u-loadmore>
				</template>
				<view v-else>
					<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
				</view>

			</scroll-view>

		</view>
		<u-overlay :show="searchMoreShow" zIndex="10"></u-overlay>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				deviceAnnualFeeRecordList: [],
				//请求参数
				params: {
					keyword: '',
					pageNum: 1,
					totalPage: 1,
					pageSize: 5
				},
				height: 0, //列表高度
				loadStatus: 'nomore', //列表底部加载更多状态
				orderStatusEnum: this.$orderStatusEnum,
			};
		},
		onReady() {
			this.getPomHeight();
			this.load();
		},
		methods: {
			pullDownRefresh() {
				this.params.keyword = '';
				this.load();
			},
			//计算滚动条高度 
			getPomHeight() {
				let query = wx.createSelectorQuery().in(this)
				query.exec(res => {
					this.height = wx.getSystemInfoSync().windowHeight - 32;
					for (let i = 0; i < res.length; i++) {
						this.height -= res[i].height;
					}
				});
			},
			load() {
				this.deviceAnnualFeeRecordList = [];
				this.params.pageNum = 1;
				this.params.totalPage = 1;
				this.findDeviceAnnualFeeRecordList();
			},
			reachBottom() {
				if (this.params.pageNum >= this.params.totalPage) {
					return;
				}
				this.params.pageNum++;
				// console.log("到底部了:", this.params.pageNum);
				this.loadStatus = 'loading'
				this.findDeviceAnnualFeeRecordList();
			},
			findDeviceAnnualFeeRecordList() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				this.$api('deviceAnnualFeeRecord.findList', this.params).then(res => {
					uni.stopPullDownRefresh();
					uni.hideLoading();
					if (res.status == 0) {
						this.params.pageNum = res.data.pageNum;
						this.params.totalPage = res.data.pages;
						this.loadStatus = res.data.pageNum === res.data.pages ? 'nomore' : 'loadmore';
						if (this.params.totalPage == 0) {
							this.loadStatus = 'nomore';
						}
						this.deviceAnnualFeeRecordList = [...this.deviceAnnualFeeRecordList, ...res.data
							.list
						]; //合并数组
					} else {
						getApp().err('获取流量卡充值记录失败：' + res.msg);
					}
				}).catch(err => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
					getApp().err("获取流量卡充值记录失败：" + err.errMsg);
				})
			},

		}
	}
</script>

<style lang="scss">
	page {
		background: linear-gradient(rgba(236, 245, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
		background-size: 100%;
		background-repeat: no-repeat;
		background-color: #F7F8F7;
	}

	.margin-top-30 {
		margin-top: 30rpx !important;
	}

	.text-38 {
		font-size: 38rpx !important;
	}

	.text-30 {
		font-size: 30rpx !important;
	}

	.text-24 {
		font-size: 24rpx !important;
	}

	.coin-detail {
		font-family: "Microsoft YaHei";

		.information-title {
			color: rgba(0, 0, 0, 0.6);
			font-size: 28rpx;
		}

		.coin-order-list {
			margin: 0 24rpx;
			margin-top: 20rpx;

			.header-statistical {
				margin: 0 0 26rpx 0;
				padding: 28rpx;
				background: rgb(96,114,255);
				border-radius: 20rpx;
				color: #FFFFFF;
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				align-items: center;

				.sub-title {
					color: rgba(255, 255, 255, 0.9);
					font-size: 20rpx;
					line-height: 34rpx;
					text-align: center;
				}

				.turnover {
					color: rgb(255, 255, 255);
					font-family: "OPPOSans";
					font-size: 32rpx;
					line-height: 34rpx;
					margin-top: 7rpx;
					text-align: center;
				}

				.exception-number {
					border: 1rpx solid rgba(255, 255, 255, 0.7);
					border-radius: 60rpx;
					color: rgba(255, 255, 255, 0.9);
					font-size: 22rpx;
					line-height: 34rpx;
					margin-top: 32rpx;
					padding: 0 20rpx;
					text-align: center;
				}

				.exception-number-not {
					height: 70rpx;
				}
			}

			.coin-order-item {
				background: $uni-bg-color;
				border-radius: 20rpx;
				padding: 30rpx;
				line-height: 34rpx;
				margin-bottom: 20rpx;

				.user-information-box {
					padding: 24rpx 16rpx;
					margin-top: 24rpx;
					width: 615rpx;
					height: 149rpx;
					background: rgba(63, 120, 254, 0.1);
					border-radius: 12rpx;



					.distribution-text {
						color: rgb(96,114,255);
						font-size: 18rpx;
					}

					.margin-bottom {
						margin-bottom: 15rpx;
					}

					.user {
						margin-left: 7rpx;
						width: 100%;

						.male {
							font-size: 26rpx;
							color: #6072FF;
							margin-left: 13rpx;
						}

						.keep-secret {
							margin-left: 9rpx;
							color: rgb(170, 0, 0);
							font-size: 24rpx;
						}

						.female {
							font-size: 26rpx;
							color: #FF4D94;
							margin-left: 13rpx;
						}
					}

					.user-right-box {
						justify-content: space-between;
						align-items: baseline;
						display: flex;

						.distribution-container {
							width: 50%;
							justify-content: space-between;
							display: flex;

							.details-box {
								display: flex;
								align-items: center;
							}

							.distribution {
								display: flex;
								align-items: center;
								justify-content: center;
								padding: 5rpx 15rpx;
								box-sizing: border-box;
								border: 1rpx solid rgb(96,114,255);
								border-radius: 30rpx;

							}
						}
					}

					.user-box {
						display: flex;
						align-items: center;
					}

				}

				.left-box {
					display: flex;
					justify-content: space-between;
					align-items: center;
				}

				.details {
					display: flex;
					align-content: center;
					justify-content: center;
					margin-top: 25rpx;
				}

				.order-time-box {
					font-size: 24rpx;
					display: flex;
					justify-content: space-between;
					align-items: baseline;

					.price {
						margin-left: 12rpx;
					}
				}

				.start-button-text {
					color: rgb(255, 255, 255);
				}

				.color-6072FF {
					background: #6072FF !important;
				}



				.coin-success {
					padding: 3rpx 9rpx;
					color: #00BB9C;
					height: 30rpx;
					box-sizing: border-box;
					border: 1rpx solid rgb(0, 187, 156);
					border-radius: 22rpx;
					margin-right: 20rpx;
				}

				.coin-color-orange {
					color: #FF7905 !important;
					border: 1rpx solid rgb(255, 121, 5) !important;
				}

				.coin-failure {
					padding: 3rpx 9rpx;
					color: #FF0000;
					height: 40rpx;
					box-sizing: border-box;
					border: 1rpx solid rgb(255, 0, 0);
					border-radius: 22rpx;
					margin-right: 20rpx;
				}

				.hide {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.information-text {
					color: rgba(0, 0, 0, 0.6);
					font-size: $f-base;
					margin-left: 11rpx;
					flex: 1;

					.item {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 20rpx;

						.item-name {
							// 强制换行
							word-wrap: break-word;
							// 强制英文单词换行
							word-break: break-word;
							width: 240rpx;
						}

						.item-count {
							margin-right: 20rpx;
						}
					}

					.item:last-child {
						margin-bottom: 0;
					}
				}

				.information-bar {

					margin-top: 20rpx;
					display: flex;
					align-items: center;
				}

				.information-bar-item {
					align-items: flex-start;
				}

				.order-info {
					color: rgba(0, 0, 0, 0.92);
					font-size: $f-base;
				}

				.coin-number-info {
					color: rgba(0, 0, 0, 0.7);
					font-size: 24rpx;
					margin-top: 39rpx;
					display: flex;
					justify-content: space-between;

					.coin-number {
						color: rgb(0, 0, 0);
						font-family: "OPPOSans";
						font-size: $f-lg;
						margin-right: 12rpx;
					}

					.member-id {
						color: rgb(0, 0, 0);
					}
				}

				.other-info2 {
					display: flex;
					flex-direction: row-reverse;
					// justify-content: space-between;
					margin-top: 27rpx;
					font-size: $f-base;
					color: rgba(0, 0, 0, 0.7);

				}

				.other-info {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					margin-top: 27rpx;

					.order-state {
						font-size: $f-base;
					}

					.order-time {
						color: rgba(0, 0, 0, 0.5);
						font-size: $f-base;
					}

				}
			}
		}

	}

	.payment-successful {
		margin-right: 14rpx;
		padding: 5rpx 10rpx;
		color: #FFFFFF;
		height: 30rpx;
		background: rgb(0, 187, 156);
		border-radius: 22rpx;
	}
	.payment-wait {
		margin-right: 14rpx;
		padding: 5rpx 10rpx;
		color: #FFFFFF;
		height: 30rpx;
		background: rgb(255, 170, 0);
		border-radius: 22rpx;
	}
</style>